<template>
  <div>
    <div class="main">
      <span v-for="(item,index) in tab" :key="index" @click="handle(index)" :class="cur == index ? 'act':''">
       {{ item.head }}
      </span>
      <div>
        {{tab[cur].body  }}
      </div>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      cur:0,
      tab:[
          {
           head:"孙悟空",
           body:"一二三四五"
           },{
            head:"大闸蟹",
            body:"上山打老虎"
           },{
            head:"猪八戒",
            body:"老虎打不着"
           },{
            head:"锅包肉",
            body:"打着小松鼠"
           },
       ],
    }
  },
  methods:{
    handle(index){
      this.cur = index
    }
  }
}
</script>

<style>
.main{
  border: 1px solid #ccc;
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
span{
  display: inline-block;
  width: 150px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #ccc;
  box-sizing:border-box;
}
.act{
  background-color: blue;
  color: white;
}
</style>